<template>
  <KnowledgeCard v-for="item in list" :key="item._id" :item="item" />
  <wd-loadmore :state="state" @reload="loadmore" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { KnowledgeList } from "@/types/consult";
import { onReachBottom } from "@dcloudio/uni-app";
import KnowledgeAPI from "@/api/system/knowledge";
import KnowledgeCard from "./KnowledgeCard.vue";

const pageNum = ref<number>(1);
const state = ref<string>("finished");
const list = ref<KnowledgeList>([]);
const props = defineProps(["tab", "tabIndex"]);

const loadmore = async () => {
  state.value = "loading";
  const res = await KnowledgeAPI.getKnowledge({
    likeFlag: props.tab,
    pageNum: pageNum.value,
  });

  if (res !== undefined) {
    list.value = list.value.concat(res);
    pageNum.value += 1;
  }
  state.value = "finished";
};

onReachBottom(async () => {
  if (props.tab == props.tabIndex) {
    await loadmore();
  }
});

onShow(async () => {
  await loadmore();
  pageNum.value = 2;
});
</script>
